<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Vue.directive 自定义指令</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>Vue.directive 自定义指令</h1>
    <hr/>
    <div id="app">
        <div v-superbone="color">{{num}}</div>
        <p><button @click="add">ADD</button></p>
    </div>
    <div>
        <button onclick="unbind()">解除绑定</button>
    </div>

    <script>
        //直接使用function作为参数
        // Vue.directive("superbone",function(el,binding,vnode){
        //     console.log(el);                //元素
        //     console.log(binding)            //绑定
        //     console.log(binding.name)       //绑定的指令名字(superbone)
        //     console.log(binding.value)      //绑定的指令实际的值(red)
        //     console.log(binding.expression) //绑定的指令的变量(color)
        //     console.log(vnode);
        //     el.style = "color:" + binding.value;
        // });

        //使用生命周期的钩子函数
        Vue.directive('superbone',{
            //被绑定时调用
            bind: function(el,binding){
                console.log('1 - bind');
                el.style = "color:" + binding.value;
            },
            //绑定到节点后调用
            inserted: function(){
                console.log('2 - inserted')
            },
            //组件更新时调用
            update: function(){
                console.log('3 - update')
            },
            //组件更新完成时调用
            componentUpdated: function(){
                console.log('4 - componentUpdated')
            },
            //解除绑定时调用
            unbind: function(){
                console.log('5 - unbind')
            }
        });


        var app = new Vue({
            el: '#app',
            data: {
                num: 10,
                color: 'red'
            },
            methods: {
                add: function(){
                    this.num++;
                }
            }
        });

        function unbind(){
            app.$destroy();
        }
    </script>

</body>
</html>